<script setup lang="ts">
import Location from '@/utils/location';

interface IProps {
  data: IGoodsAdditionalInfo;
}

type EmitEvents = {
  (event: 'change', payload: { value: string }): void;
};

const props = defineProps<IProps>();
const emits = defineEmits<EmitEvents>();
const state = reactive<{ location: string }>({ location: props.data.value });

onMounted(async () => {
  const location = await Location.reverseGeocoderLocation();
  state.location = location!.address || '';
  emits('change', { value: state.location });
});

// 选择位置
const handleSelectLocation = () => {
  uni.chooseLocation({
    success: function (res) {
      state.location = res.name;
      emits('change', { value: state.location });
    },
  });
};
</script>

<template>
  <van-cell :title="props.data.attrName" :required="props.data.requiredFlag">
    <view class="text-align-left" @click="handleSelectLocation">
      <view class="c-text-12 c-black">{{ state.location }}</view>
      <view class="c-text-10 c-color">点击重新选择位置</view>
    </view>
  </van-cell>
</template>
